<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>初识Vue</title>
  <!--  1.1.0引入Vue-开发模式-->
  <script type="text/javascript" src="../js/vue.js"></script>
  <!--  1.1.1引入Vue-生产模式-->
  <!--<script type="text/javascript" src="../js/vue.min.js"></script>-->
  <!--  1.2引入谷歌Vue开发者工具Vue.js devtools-->
</head>
<body>

<!--
  初识Vue：
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称为【Vue模板】
    4.Vue实例和容器是一一对应的
    5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
    6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
    7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

    注意区分：js表达式   和   js代码（语句）
    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
      （1）a
      （2）a+b
      （3）demo(1)
      （4）x===y?'a':'b'
    2.js代码（语句）
      （1）if(){}
      （2）for(){}
-->

<!--2.1准备好一个容器-->
<div id="root">
  <!--toUpperCase  将字符串转化成大写-->
  <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
</div>

<script type="text/javascript">
  // 1.3productionTip 默认值为true，设置为false以阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false
  // 2.2创建Vue实例
  new Vue({
    //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
    el: '#root',
    // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
    data: {
      name: 'jinchuanchuan',
      address:'地址'
    }
  })

</script>
</body>
</html>